<?php
		require_once(dirname(__FILE__) . "/start.inc");
		global $CONFIG;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>A/B Tester</title>
		<link href="<?php echo $CONFIG->getLocalhostUrl();?>/css/style.css" media="all" type="text/css" rel="stylesheet">
		<script type="text/javascript" src="<?php echo $CONFIG->getLocalhostUrl();?>/3rdparty/jquery-1.8.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){

				$("#url-input").bind({
					"focus": function(){
						console.log('---->focus');
						$(this).siblings(".url-label").css({opacity: 0.4});
					},
					"blur": function(){
						if ($(this).val().length == 0) {
							$(this).siblings(".url-label").css({opacity: 1}).show();
						}
					},
					"keypress": function(){
						$(this).siblings(".url-label").hide();
					}
				});

				$(".primary-button.right").click(function(){
					var url = $("#url-input").val();
					if ($.trim(url).length > 0) {
						location.href = "<?php echo $CONFIG->getLocalhostUrl();?>/disp.php#" + url;
					} else {
						$("#url-input").focus();
					}
					return false;
				});

				$("form[name='abtest']").submit(function(){
					var url = $("input[name='url']").val();
					if (url) {
						location.href = "<?php echo $CONFIG->getLocalhostUrl();?>/disp.php#" + url;
					} else {
						alert("You should enter a url for testing!");
					}
				});
			});
		</script>
	</head>
	<body class="index">
		<div class="wrapper">
			<div id="top">

			</div>
			<div id="header">
				<div class="background"><div></div></div>
				<div class="content">
					<h1 class="logo"><a href="/">A/B Tester</a></h1>
					<ul class="nav-main"></ul>
					<div class="hero">
						<h1>A/B Testing Solution</h1>
						<h2>Website optimization made easy.</h2>
						<div class="grid4 center">
							<h5><a href="#" class="video-link">Watch it in action</a></h5>
						</div>
						<div class="cta grid12 center" id="cta">
							<div class="cta-box clearfix" id="cta-box">
							<form action="#">
								<label for="url-input" class="url-label">Type in a URL to try it out</label>
								<input type="text" autocomplete="off" value="" class="url-input left" id="url-input" name="url-input">
								<button class="primary-button right" type="submit">Test it Out</button>
							</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="main-container">
				<div id="customers" class="grids-container clearfix">
					<h2 class="grid14 divider-heading center blue">Over 3,000 Happy Customers</h2>
					<div class="customer-list grid16 center clearfix">
						<ul class="clearfix">
							<li><img src="https://www.optimizely.com/static/img/customers/starbucks.png"></li>
							<li class="spacer"></li>
							<li><img src="https://www.optimizely.com/static/img/customers/desk.png"></li>
							<li class="spacer"></li>
							<li><img src="https://www.optimizely.com/static/img/customers/fico.png"></li>
							<li class="spacer"></li>
							<li><img src="https://www.optimizely.com/static/img/customers/mtv.png"></li>
							<li class="spacer"></li>
							<li><img src="https://www.optimizely.com/static/img/customers/abc.png"></li>
						</ul>
					</div>

					<div class="customer-list grid16 center clearfix">
						<ul class="clearfix">
							<li><img src="https://www.optimizely.com/static/img/customers/fox.png"></li>
							<li class="spacer"></li>
							<li><img src="https://www.optimizely.com/static/img/customers/guardian.png"></li>
							<li class="spacer"></li>
							<li><img src="https://www.optimizely.com/static/img/customers/cbs.png"></li>
							<li class="spacer"></li>
							<li><img src="https://www.optimizely.com/static/img/customers/disney.png"></li>
							<li class="spacer"></li>
							<li><img src="https://www.optimizely.com/static/img/customers/techcrunch.png"></li>
						</ul>
					</div>
				</div>
                <div class="push"></div>
			</div>
		</div>
		<div id="footer">
			<div>
				<div class="footer-logo"></div>
				<div class="footer-line"></div>
				<div class="left"></div>
				<div class="right"></div>
			</div>
		</div>
	</body>
</html>